<!-- src/views/VideoDetail.vue -->
<template>
  <div class="video-detail-container">
    <!-- 顶部导航 -->
    <AppNavbar @search="handleSearch" v-model:searchKey="searchKey" />



    <!-- 视频详情内容 -->
    <div class="video-content">
      <!-- 左侧主内容区 -->
      <div class="main-content">
        <!-- 视频播放器 -->
        <div class="video-player">
          <video
              ref="videoPlayer"

              :src="currentVideo.videoUrl"
              controls
              autoplay
              class="player"
          ></video>
        </div>

        <!-- 视频信息 -->
        <div class="video-info">
          <h1 class="video-title">{{ currentVideo.title }}</h1>

          <div class="video-meta">
            <div class="nickname-info">
              <el-avatar :size="40" :src="currentVideo.avatar" />
              <div class="nickname-detail">
                <div class="nickname-name">{{ currentVideo.nickname }}</div>
                <div class="fans-count">粉丝：{{ 1000000 }}</div>
<!--                <div class="fans-count">粉丝：{{ formatViews(currentVideo.fans) }}</div>-->
              </div>
              <el-button type="primary" class="follow-btn">关注</el-button>
            </div>

            <div class="action-buttons">
              <el-button class="action-btn" :class="{ 'liked': isLiked }" @click="handleLike">
                <el-icon><Star /></el-icon>
                <span>{{ formatViews(currentVideo.likes) }}</span>
              </el-button>
              <el-button class="action-btn">
                <el-icon><Coin /></el-icon>
                <span>{{ formatViews(currentVideo.coins) }}</span>
              </el-button>
              <el-button
                class="action-btn"
                :class="{ 'favorited': isFavorited }"
                @click="handleFavoriteClick"
              >
                <el-icon><CollectionTag /></el-icon>
                <span>{{ formatViews(currentVideo.collects) }}</span>
              </el-button>
              <el-button class="action-btn">
                <el-icon><Share /></el-icon>
                <span>分享</span>
              </el-button>
            </div>
          </div>

          <!-- 视频描述 -->
          <div class="video-description">
            <div class="publish-info">
              发布时间：{{ currentVideo.createdAt }} · 播放：{{ formatViews(currentVideo.views) }}
            </div>
            <p class="description-text">
              {{ currentVideo.description }}
            </p>
          </div>
        </div>

        <!-- 视频标签区域 -->
        <div class="video-tags">
          <div class="tags-header">
            <el-icon><PriceTag /></el-icon>
            <span>视频标签</span>
          </div>
          <div class="tags-container">
            <el-tag
                v-for="tag in tags"
                :key="tag"
                class="tag-item"
                type="info"
                effect="plain"
                @click="handleTagClick(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
          <div class="section-header">
            <h2>评论 <span class="comment-count">{{ totalComments }}条</span></h2>
          </div>

          <!-- 评论输入框 -->
          <div class="comment-input">
            <el-avatar :size="40" :src="userAvatar" />
            <el-input
                placeholder="发一条友善的评论"
                v-model="newComment.content"

                size="large"
                :autosize="{ minRows: 2, maxRows: 4 }"
                class="comment-textarea"
            />
            <el-button
                type="primary"
                size="large"
                class="submit-btn"
                @click="submitComment"
            >评论</el-button>
          </div>

          <!-- 评论列表 (使用递归组件) -->
          <div class="comment-list">
            <comment-item
                v-for="comment in topLevelComments"
                :key="comment.id"
                :comment="comment"
                :all-comments="comments"
                :depth="0"
                :current-user-id="userId"
                @reply="handleReply"
                @delete-comment="handleDeleteComment"
            />
          </div>
        </div>




      </div>

      <!-- 右侧推荐列表 -->
      <div class="recommend-list">
        <div class="section-header">
          <h2>推荐视频</h2>
        </div>

        <div class="recommend-videos">
          <div
              v-for="video in recommendVideos"
              :key="video.id"
              class="recommend-item"
              @click="handleVideoClick(video)"
          >
            <div class="cover-container">
              <el-image
                  :src="video.coverUrl"
                  class="video-cover"
                  fit="cover"
              />
              <div class="video-stats">
                <span class="play-count">
                  <el-icon><View /></el-icon>
                  {{ formatViews(video.views) }}
                </span>
              </div>
              <div class="video-duration">
                {{ video.times }}
              </div>
            </div>

            <div class="video-info">
              <h3 class="title">{{ video.title }}</h3>
              <div class="meta-line">
                <span class="nickname">
                  {{ video.nickname }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 收藏夹选择对话框 -->
    <el-dialog
      v-model="showFavoritesDialog"
      title="选择收藏夹"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="favorites-dialog-content">
        <p class="dialog-tip">请选择要收藏到的收藏夹：</p>
        <div class="favorites-list">
          <el-checkbox-group v-model="selectedFavoritesIds">
            <div
              v-for="favorite in favoritesList"
              :key="favorite.id"
              class="favorite-item"
            >
              <el-checkbox :label="favorite.id">
                <div class="favorite-info">
                  <span class="favorite-name">{{ favorite.name }}</span>
                  <el-tag
                    :type="favorite.isPublic ? 'success' : 'warning'"
                    size="small"
                  >
                    {{ favorite.isPublic ? '公开' : '私密' }}
                  </el-tag>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showFavoritesDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmFavorite">确认收藏</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref, onMounted, computed, watch} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Star, Coin, CollectionTag, Share, View, ChatDotRound
} from '@element-plus/icons-vue'
import CommentItem from "@/components/CommentItem.vue";
import {useVideoStore} from "@/api/stores/usevideoStore.js";
import {storeToRefs} from "pinia";
import {getCategories} from "@/api/category.js";
import {getTagsById} from "@/api/tag.js";
import AppNavbar from '@/components/AppNavbar.vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {getVideoById} from "@/api/vidoe.js";
import {addComment, delComment, getCommentByVideoId} from "@/api/comment.js";
import {checkVideoFavorites, addVideoToFavorites, cancelVideoFromFavorites, getFavoritesByUserId} from "@/api/favorites.js";
import { checkVideoLike, likeVideo, cancelVideoLike } from '@/api/videoLike.js';



// 使用路由
const route = useRoute()
const router = useRouter()

const videoStore = useVideoStore()
const currentVideo = ref(videoStore.currentVideo)

// 收藏相关数据
const isFavorited = ref(false)
const favoritesList = ref([])
const favoritedIds = ref([])
const showFavoritesDialog = ref(false)
const selectedFavoritesIds = ref([])

// 搜索相关
const searchKey = ref('')

// 点赞相关数据
const isLiked = ref(false)

// 确保数据存在
onMounted(async () => {

  const videoId = route.params.id

  if (!currentVideo.value) {
    try {
      const res = await getVideoById(videoId)
      currentVideo.value = res.videos

    } catch (error) {
      console.error('视频加载失败:', error)
      ElMessage.error('视频加载失败，请重试')
    }
  }

   await getTags(videoId)

   await getComments(videoId)

  const userData = localStorage.getItem('user');
  userAvatar.value =  userData ? JSON.parse(userData).avatar : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" ;

  // 检查收藏状态
  await checkFavoritesStatus(videoId)

  // 获取用户收藏夹列表
  await getUserFavorites()

  // 检查点赞状态
  await checkLikeStatus(videoId)

})

// // 监听路由变化
// watch(() => route.params.id, (newId) => {
//   fetchVideoData()
// })
//
// const fetchVideoData = async () => {
//   // 优先使用路由state中的数据
//   if (history.state?.videoData) {
//     currentVideo.value = history.state.videoData
//     return
//   }
//
//   // 如果没有state数据，则通过接口获取
//   // try {
//   //   const res = await getVideoDetail(route.params.id)
//   //   if (res.code === 200) {
//   //     currentVideo.value = res.data
//   //   } else {
//   //     // 模拟数据作为备用
//   //     currentVideo.value = {
//   //       id: route.params.id,
//   //       title: "Vue3和Element Plus构建的现代化视频网站",
//   //       coverUrl: '/pic/3.jpg',
//   //       videoUrl: '/videos/1.mp4',
//   //       nickname: '前端开发工程师',
//   //       views: 125600,
//   //       likes: 5600,
//   //       coins: 1200,
//   //       collects: 3200,
//   //       createdAt: '2023-07-15',
//   //       description: '这个视频展示了如何使用Vue3和Element Plus构建一个现代化的视频网站。我们将实现响应式布局、视频播放功能、推荐系统以及用户交互界面。整个项目采用了最新的前端技术栈，包括Vue Router进行路由管理，Vue Composition API进行状态管理。',
//   //       commentCount: 256,
//   //       fans: 120000,
//   //       tags: ['Vue3', 'Element Plus', '前端开发', '视频网站', '响应式设计', 'UI设计']
//   //     }
//   //   }
//   //
//   //
//   // } catch (error) {
//   //   console.error('获取视频详情失败:', error)
//   // }
// }


//视频的标签

const  tags =ref([])
async function getTags (vId){

  const res = await getTagsById(vId)
  if (res.code === 200){
    tags.value =res.data;

  }
}



// 评论
const comments = ref([])

async function getComments (vId){

  const res = await getCommentByVideoId(vId)
  if (res.code === 200){
    comments.value =res.comments;

  }
}


//
// addComment()
// delComment()



// 新评论对象
const newComment = ref({
  content: '',
  parentId: 0 // 默认为顶级评论
})

// 总评论数
const totalComments = computed(() => {
  return comments.value.length
})

// 顶级评论（parentId=0）
const topLevelComments = computed(() => {
  return comments.value.filter(comment => comment.parentId === 0)
})

// 用户头像
const userAvatar = ref('')

const userId = ref(Number(localStorage.getItem('userId')))

// 处理回复
const handleReply = async (replyData) => {
  // 组装评论对象
  const commentObj = {
    videoId: currentVideo.value.id,
    content: replyData.content,
    parentId: replyData.parentId
  }
  const res = await addComment(commentObj)
  if (res.code === 200) {
    ElMessage.success('回复成功')
    await getComments(currentVideo.value.id)
  } else {
    ElMessage.error(res.msg || '回复失败')
  }
}

// 提交新评论
const submitComment = async () => {
  if (newComment.value.content.trim()) {
    const commentObj = {
      videoId: currentVideo.value.id,
      content: newComment.value.content,
      parentId: newComment.value.parentId
    }
    const res = await addComment(commentObj)
    if (res.code === 200) {
      ElMessage.success('评论成功')
      await getComments(currentVideo.value.id)
      newComment.value = { content: '', parentId: 0 }
    } else {
      ElMessage.error(res.msg || '评论失败')
    }
  }
}

// 删除评论
const handleDeleteComment = async (commentId) => {
  const res = await delComment(commentId)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    await getComments(currentVideo.value.id)
  } else {
    ElMessage.error(res.msg || '删除失败')
  }
}

// 收藏相关函数
// 检查收藏状态
const checkFavoritesStatus = async (videoId) => {
  try {
    const res = await checkVideoFavorites(videoId)
    if (res.code === 200) {
      isFavorited.value = res.data.favorited
      favoritedIds.value = res.data.favoritesIds || []
    }
  } catch (error) {
    console.error('检查收藏状态失败:', error)
  }
}

// 获取用户收藏夹
const getUserFavorites = async () => {
  try {
    const userId = localStorage.getItem('userId')
    if (userId) {
      const res = await getFavoritesByUserId(userId)
      if (res.code === 200) {
        favoritesList.value = res.favorites || []
      }
    }
  } catch (error) {
    console.error('获取收藏夹失败:', error)
  }
}

// 处理收藏按钮点击
const handleFavoriteClick = () => {
  if (!localStorage.getItem('userId')) {
    ElMessage.warning('请先登录')
    return
  }

  if (isFavorited.value) {
    // 如果已收藏，显示取消收藏确认
    ElMessageBox.confirm('确定要取消收藏这个视频吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await cancelFavorite()
    }).catch(() => {})
  } else {
    // 如果未收藏，显示收藏夹选择对话框
    showFavoritesDialog.value = true
  }
}

// 取消收藏
const cancelFavorite = async () => {
  try {
    // 取消所有收藏夹中的收藏
    for (const favoritesId of favoritedIds.value) {
      await cancelVideoFromFavorites(currentVideo.value.id, favoritesId)
    }
    isFavorited.value = false
    favoritedIds.value = []
    ElMessage.success('取消收藏成功')
  } catch (error) {
    console.error('取消收藏失败:', error)
    ElMessage.error('取消收藏失败')
  }
}

// 确认收藏
const confirmFavorite = async () => {
  if (selectedFavoritesIds.value.length === 0) {
    ElMessage.warning('请选择至少一个收藏夹')
    return
  }

  try {
    for (const favoritesId of selectedFavoritesIds.value) {
      const videoFavorite = {
        videoId: currentVideo.value.id,
        favoritesId: favoritesId
      }
      await addVideoToFavorites(videoFavorite)
    }

    isFavorited.value = true
    favoritedIds.value = [...favoritedIds.value, ...selectedFavoritesIds.value]
    selectedFavoritesIds.value = []
    showFavoritesDialog.value = false
    ElMessage.success('收藏成功')
  } catch (error) {
    console.error('收藏失败:', error)
    ElMessage.error('收藏失败')
  }
}

// 格式化数字
const formatViews = (num) => {
  if (num > 10000) return `${(num / 10000).toFixed(1)}万`
  if (num > 1000) return `${(num / 1000).toFixed(1)}千`
  return num
}

// 当前视频数据
// 在setup顶部添加路由状态监听

const handleTagClick = (tag) => {
  console.log('点击标签:', tag)
  // 实际应用中，这里可以跳转到标签搜索页
  // router.push(`/search?tag=${tag}`)
}



// 推荐视频列表
const recommendVideos = ref([
  { id: 2, title: '【弛放/爵士/嘻哈】DJ Okawari - 合集', coverUrl: 'http://sy9colix3.hn-bkt.clouddn.com/Snipaste_2025-06-30_14-04-06.png', videoUrl: 'http://sy9colix3.hn-bkt.clouddn.com/lma2wGMswC_qlSAorCvLthB-qLXQ', nickname: 'xtrikil', views: 98500, times: '15:24' },
  { id: 3, title: '我不推荐买小米YU7 Max ？！', coverUrl: 'http://sy9colix3.hn-bkt.clouddn.com/Snipaste_2025-06-30_14-05-03.png', videoUrl: 'http://sy9colix3.hn-bkt.clouddn.com/lma2wGMswC_qlSAorCvLthB-qLXQ', nickname: '比巴卜喂', views: 76200, times: '18:42' },
  { id: 4, title: '说了再见！', coverUrl: 'http://sy9colix3.hn-bkt.clouddn.com/Snipaste_2025-06-30_14-07-08.png', videoUrl: 'http://sy9colix3.hn-bkt.clouddn.com/lma2wGMswC_qlSAorCvLthB-qLXQ', nickname: '可达鸭', views: 114300, times: '22:15' },

])

// 评论文本
const commentText = ref('')

// 点击推荐视频
const handleVideoClick = (video) => {
  router.push(`/video/${video.id}`)
  currentVideo.value = {...video, id: video.id}
}

// 处理搜索
const handleSearch = () => {
  if (searchKey.value.trim()) {
    router.push(`/search?q=${encodeURIComponent(searchKey.value.trim())}`)
  }
}

// 页面加载时滚动到顶部
onMounted(() => {
  window.scrollTo(0, 0)
})

// 检查点赞状态
const checkLikeStatus = async (videoId) => {
  try {
    const res = await checkVideoLike(videoId)
    if (res.code === 200) {
      isLiked.value = res.data === true
    }
  } catch (e) {
    isLiked.value = false
  }
}

// 点赞
const handleLike = async () => {
  if (!localStorage.getItem('userId')) {
    ElMessage.warning('请先登录')
    return
  }
  if (isLiked.value) {
    // 已点赞，执行取消
    const res = await cancelVideoLike(currentVideo.value.id)
    if (res.code === 200) {
      isLiked.value = false
      currentVideo.value.likes = (currentVideo.value.likes || 1) - 1
      ElMessage.success('已取消点赞')
    } else {
      ElMessage.error(res.msg || '取消点赞失败')
    }
  } else {
    // 未点赞，执行点赞
    const res = await likeVideo(currentVideo.value.id)
    if (res.code === 200) {
      isLiked.value = true
      currentVideo.value.likes = (currentVideo.value.likes || 0) + 1
      ElMessage.success('点赞成功')
    } else {
      ElMessage.error(res.msg || '点赞失败')
    }
  }
}

</script>

<style lang="scss" scoped>

.detail-header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;

  .header-content {
    display: flex;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;

    .logo {
      margin-right: 30px;
    }

    .search-input {
      width: 400px;
    }
  }
}

.video-content {
  display: flex;
  max-width: 1600px;
  margin: 20px auto;
  padding: 0 20px;
  gap: 20px;
}

.main-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.video-player {
  background: #000;
  border-radius: 8px;
  overflow: hidden;

  .player {
    width: 100%;
    height: 600px;
    display: block;
    outline: none;
  }
}

.video-info {
  margin-top: 20px;

  .video-title {
    font-size: 22px;
    font-weight: 600;
    color: #18191c;
    margin: 0 0 15px;
  }

  .video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f2f3;

    .nickname-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .nickname-detail {
        .nickname-name {
          font-weight: 600;
          font-size: 16px;
        }

        .fans-count {
          font-size: 12px;
          color: #9499a0;
        }
      }

      .follow-btn {
        margin-left: 10px;
        padding: 7px 16px;
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;

      .action-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        background: #f4f4f5;
        border: none;
        border-radius: 6px;
        color: #61666d;
        font-size: 14px;
        transition: all 0.3s;

        &:hover {
          background: #e5e6eb;
          color: #00aeec;
        }

        &.favorited {
          background: #e5f0ff;
          color: #00aeec;
          border-color: #c0d9ff;
        }

        &.liked {
          background: #fff3e0;
          color: #ff9800;
          border: 1px solid #ffd180;
          box-shadow: 0 2px 8px rgba(255, 152, 0, 0.08);
        }

        .el-icon {
          font-size: 18px;
        }
      }
    }
  }

  .video-description {
    padding: 20px 0;

    .publish-info {
      font-size: 14px;
      color: #9499a0;
      margin-bottom: 12px;
    }

    .description-text {
      font-size: 15px;
      line-height: 1.6;
      color: #61666d;
      margin: 0;
    }
  }
}

/* 视频标签样式 */
.video-tags {
  margin: 20px 0;
  padding: 15px 0;
  border-top: 1px solid #f1f2f3;
  border-bottom: 1px solid #f1f2f3;

  .tags-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size:15px;
    color: #61666d;

    .el-icon {
      margin-right: 8px;
      color: #00aeec;
      font-size: 16px;
    }
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tag-item {
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 15px;
    background-color: #f4f4f5;
    border-color: #e5e7eb;

    &:hover {
      background-color: #e5f0ff;
      border-color: #c0d9ff;
      color: #00aeec;
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(0, 174, 236, 0.2);
    }
  }
}

.comments-section {
  margin-top: 30px;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      font-size: 20px;
      margin: 0;
      font-weight: 600;
    }

    .comment-count {
      font-size: 14px;
      color: #9499a0;
      margin-left: 10px;
      font-weight: normal;
    }
  }

  .comment-input {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    align-items: flex-start;
    .el-avatar {
      margin-top: 4px;
    }
    .comment-textarea {
      flex: 1;
      font-size: 15px;
      border-radius: 8px;
      background: #f7f8fa;
      min-height: 48px;
      margin-right: 8px;
    }
    .submit-btn {
      width: 90px;
      height: 44px;
      font-size: 16px;
      border-radius: 8px;
      margin-top: 2px;
    }
  }

  .comment-item {
    display: flex;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #f1f2f3;

    .comment-content {
      flex: 1;

      .comment-header {
        margin-bottom: 8px;

        .comment-nickname {
          font-weight: 600;
          font-size: 14px;
          margin-right: 10px;
        }

        .comment-time {
          font-size: 12px;
          color: #9499a0;
        }
      }

      .comment-text {
        font-size: 14px;
        line-height: 1.5;
        color: #61666d;
        margin-bottom: 10px;
      }

      .comment-actions {
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 13px;
        color: #9499a0;

        .el-icon {
          font-size: 16px;
          cursor: pointer;

          &:hover {
            color: #00aeec;
          }
        }
      }
    }
  }
}

.recommend-list {
  width: 340px;

  .section-header {
    margin-bottom: 15px;

    h2 {
      font-size: 18px;
      margin: 0;
      font-weight: 600;
    }
  }
}

.recommend-videos {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recommend-item {
  display: flex;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
  padding: 8px;
  border-radius: 6px;

  &:hover {
    background: #f9f9f9;
    transform: translateX(3px);
  }

  .cover-container {
    position: relative;
    width: 150px;
    height: 85px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;

    .video-cover {
      width: 100%;
      height: 100%;
    }

    .video-stats {
      position: absolute;
      bottom: 4px;
      left: 4px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;

      .el-icon {
        font-size: 12px;
      }
    }

    .video-duration {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
    }
  }

  .video-info {
    flex: 1;

    .title {
      font-size: 14px;
      line-height: 1.4;
      margin: 0 0 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nickname {
      font-size: 12px;
      color: #9499a0;
    }
  }
}

@media (max-width: 1200px) {
  .video-content {
    flex-direction: column;
  }

  .recommend-list {
    width: 100%;
  }

  .recommend-item {
    .cover-container {
      width: 200px;
      height: 110px;
    }
  }
}

@media (max-width: 768px) {
  .video-player .player {
    height: 400px;
  }

  .video-meta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 15px;


    .action-buttons {
      width: 100%;
      overflow-x: auto;
      padding-bottom: 10px;
    }
  }



  .recommend-item {
    .cover-container {
      width: 150px;
      height: 85px;
    }
  }
}

/* 收藏夹对话框样式 */
.favorites-dialog-content {
  .dialog-tip {
    margin-bottom: 15px;
    color: #61666d;
    font-size: 14px;
  }

  .favorites-list {
    max-height: 300px;
    overflow-y: auto;

    .favorite-item {
      padding: 10px 0;
      border-bottom: 1px solid #f1f2f3;

      &:last-child {
        border-bottom: none;
      }

      .favorite-info {
        display: flex;
        align-items: center;
        gap: 10px;

        .favorite-name {
          font-size: 14px;
          color: #18191c;
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style>
